<template>
  <div>
    <el-dialog :visible.sync="visible" width="42vw" :close-on-press-escape="false" :close-on-click-modal="false" class="crop-dialog" @close="hide">
      <div slot="title" class="title">图片裁剪</div>
      <div class="crop-container">
        <div class="crop-box">
          <vue-cropper
            ref="cropper"
            :autoCrop="cropperOption.autoCrop"
            :autoCropHeight="cropperOption.autoCropHeight"
            :autoCropWidth="cropperOption.autoCropWidth"
            :canMove="cropperOption.canMove"
            :canMoveBox="cropperOption.canMoveBox"
            :canScale="cropperOption.canScale"
            :centerBox="cropperOption.centerBox"
            :enlarge="cropperOption.enlarge"
            :fixedBox="cropperOption.fixedBox"
            :fixed="cropperOption.fixed"
            :fixedNumber="cropperOption.fixedNumber"
            :full="cropperOption.full"
            :high="cropperOption.high"
            :img="cropperOption.img"
            :info="true"
            :infoTrue="cropperOption.infoTrue"
            :limitMinSize="cropperOption.limitMinSize"
            :maxImgSize="cropperOption.maxImgSize"
            :mode="cropperOption.mode"
            :original="cropperOption.original"
            :outputSize="cropperOption.size"
            :outputType="cropperOption.outputType"
            @cropMoving="onCropMoving"
            @imgLoad="onImgLoad"
            @realTime="onRealTime"
          ></vue-cropper>
        </div>
        <div :style="previews.div" class="crop-preview">
          <img :src="previews.url" :style="previews.img" />
        </div>
      </div>
      <div class="option-btn">
        <div class="btn" title="向左旋转90℃" @click="rotateLeft"><i class="el-icon-refresh-left"></i></div>
        <div class="btn" title="向右旋转90℃" @click="rotateRight"><i class="el-icon-refresh-right"></i></div>
        <div class="btn" title="缩小" @click="changeScale(-1)"><i class="el-icon-zoom-out"></i></div>
        <div class="btn" title="放大" @click="changeScale(1)"><i class="el-icon-zoom-in"></i></div>
        <div class="btn" title="去除照片阴影(测试阶段)"><el-checkbox v-model="isGetRidShadow" @change="onRidShadowChange">去底</el-checkbox></div>
      </div>
      <div class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">完成裁剪</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
import getRidShadow from './getRidShadow.js'
export default {
  name: 'cropper',
  components: {
    VueCropper
  },
  data() {
    return {
      visible: false,
      previews: {},
      crap: false,
      cropperOption: {
        img: '',
        size: 1, // 输出图片压缩比, 默认 1
        full: false, // 是否输出原图比例的截图
        infoTrue: false, // 截图信息展示是否时真实的输出宽高
        outputType: 'png',
        canScale: true, // 是否开启滚轮缩放大小
        canMove: true, // 能否拖动图片
        canMoveBox: true, // 能否拖动截图框
        fixed: true, // 固定宽高比
        fixedBox: false, // 截图框固定大小
        fixedNumber: [5, 2], // 截图框固定大小的比例
        original: false, // 上传图片时，是否显示原始宽高
        autoCrop: true, // 是否自动生成截图框
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 200,
        autoCropHeight: 80,
        centerBox: true, // 截图框是否限制在图片里(只有在自动生成截图框时才生效)
        high: false, // 是否根据 dpr 生成适合屏幕的高清图片
        cropData: {},
        enlarge: 1, // 按照截图框比例输出，默认 1
        mode: 'contain', // 图片的默认渲染方式
        maxImgSize: 2000, // 上传图片时图片最大大小(默认会压缩尺寸到这个大小)
        limitMinSize: [100, 40] // 截图框最小限制
      },
      isGetRidShadow: true, // 去除照片阴影
      getRidShadowImg: '', // 去除阴影和底色的照片
      originalImg: '' // 原始底色的照片
    }
  },
  computed: {
    cropper() {
      return this.$refs.cropper
    }
  },
  methods: {
    show(file) {
      this.originalImg = file.url
      // 处理阴影
      getRidShadow({ url: file.url, isTransparent: true }, (url) => {
        this.getRidShadowImg = url
        this.cropperOption.img = this.isGetRidShadow ? url : file.url
        this.visible = true
      })
    },
    hide() {
      this.visible = false
    },
    // 切换阴影图片
    onRidShadowChange() {
      this.cropperOption.img = this.isGetRidShadow ? this.getRidShadowImg : this.originalImg
    },
    // 实时预览函数
    // data 中保存了需要预览的样式及 url，直接用就行了
    onRealTime(data) {
      // console.log('onRealTime -> data', data);
      this.previews = data
    },
    // 重置
    refreshCrop() {
      this.$refs.cropper.refresh()
    },
    // 缩放num=> +1 , -1
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    // 左转
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    // 右转
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    onImgLoad(msg) {
      console.log('onImgLoad -> msg', msg)
      // 图片加载完成后，获取图片的真实宽高
      // 以最小的那个值作为裁剪框默认大小
      const { trueWidth, trueHeight } = this.cropper
      const width = Math.min(trueWidth, trueHeight)
      this.cropperOption.autoCropWidth = width
      this.cropperOption.autoCropHeight = width
    },
    onCropMoving(data) {
      this.cropperOption.cropData = data
    },
    onConfirm() {
      // 获取裁剪后的 blob 数据，传递到外部
      this.$refs.cropper.getCropBlob((data) => {
        this.hide()
        // window.URL.createObjectURL()
        this.$emit('on-finish', data)
      })
    },
    onCancel() {
      this.hide()
      this.$emit('on-cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.crop-dialog .el-dialog {
  min-width: 860px;
}
.crop-container {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.crop-box {
  width: 50%;
  height: 36vh;
  min-height: 400px;
}
.crop-preview {
  margin: auto;
  border: 1px dotted #e4e4e4;
  overflow: hidden;
  box-shadow: 0px 3px 10px #ac9e9e;
}
.crop-action {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-button {
  width: 98px;
  margin-left: 10px;
}
.dialog-footer {
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
</style>
<style lang="scss">
.option-btn {
  height: 40px;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  margin-top: 20px;
  overflow: hidden;
  margin-left: 2%;
  width: 45%;
  .btn {
    flex: 1;
    height: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 17px;
    border-right: 1px solid #eee;
    cursor: pointer;
    &:hover {
      background: #f7f7f7;
    }
    &:last-child {
      border-right: 0px;
    }
  }
}
</style>
